<!--
 * @Description: 
 * @Date: 2023-12-19 20:32:48
 * @LastEditTime: 2023-12-25 12:22:46
-->
<template>
	<vue3-seamless-scroll
		v-if="dataSource && dataSource.length > 0"
		:list="dataSource"
		class="seamless_scroll"
		:hover="true"
		:step="0.3"
	>
		<div class="seamless_scroll_item" v-for="(item, index) in dataSource" :key="index">
			<span>{{ item.name }}</span>
			<span>{{ item.cunzhenName }}</span>
			<span class="virtual-list-item-col"><a-rate :value="item.star" disabled style="font-size: 12px" /></span>
		</div>
	</vue3-seamless-scroll>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const props = defineProps({
	dataSource: {
		type: Array,
		required: true
	}
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.seamless_scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.seamless_scroll .seamless_scroll_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 10px;
	& > span:not(:last-of-type) {
		color: #fff6d1;
	}
	& > span:nth-of-type(1) {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	& > span:nth-of-type(2) {
		width: 100px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	& > span:nth-of-type(3) {
		width: 100px;
		text-align: center;
	}
}
</style>
